<template>
  <div class="store-info-container">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <h3><el-icon><Shop /></el-icon> 店铺信息管理</h3>
          <el-button type="primary" @click="handleEdit" v-if="!isEditing">
            <el-icon><Edit /></el-icon> 编辑信息
          </el-button>
          <div v-else>
            <el-button type="success" @click="handleSave">
              <el-icon><Check /></el-icon> 保存
            </el-button>
            <el-button @click="handleCancel">
              <el-icon><Close /></el-icon> 取消
            </el-button>
          </div>
        </div>
      </template>

      <el-form
        ref="storeFormRef"
        :model="storeForm"
        :rules="storeRules"
        label-width="120px"
        class="store-form"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="店铺名称" prop="name">
              <el-input
                v-model="storeForm.name"
                :disabled="!isEditing"
                placeholder="请输入店铺名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店铺编码" prop="code">
              <el-input
                v-model="storeForm.code"
                :disabled="!isEditing"
                placeholder="请输入店铺编码"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="店铺类型" prop="type">
              <el-select
                v-model="storeForm.type"
                :disabled="!isEditing"
                placeholder="请选择店铺类型"
                style="width: 100%"
              >
                <el-option label="直营店" value="direct" />
                <el-option label="加盟店" value="franchise" />
                <el-option label="旗舰店" value="flagship" />
                <el-option label="专卖店" value="specialty" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店铺状态" prop="status">
              <el-select
                v-model="storeForm.status"
                :disabled="!isEditing"
                placeholder="请选择店铺状态"
                style="width: 100%"
              >
                <el-option label="营业中" value="active" />
                <el-option label="暂停营业" value="suspended" />
                <el-option label="装修中" value="renovation" />
                <el-option label="已关闭" value="closed" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="店铺地址" prop="address">
              <el-input
                v-model="storeForm.address"
                :disabled="!isEditing"
                placeholder="请输入店铺详细地址"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="storeForm.phone"
                :disabled="!isEditing"
                placeholder="请输入联系电话"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店长姓名" prop="manager">
              <el-input
                v-model="storeForm.manager"
                :disabled="!isEditing"
                placeholder="请输入店长姓名"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="营业开始时间" prop="openTime">
              <el-time-picker
                v-model="storeForm.openTime"
                :disabled="!isEditing"
                placeholder="选择营业开始时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业结束时间" prop="closeTime">
              <el-time-picker
                v-model="storeForm.closeTime"
                :disabled="!isEditing"
                placeholder="选择营业结束时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="店铺面积" prop="area">
              <el-input
                v-model="storeForm.area"
                :disabled="!isEditing"
                placeholder="请输入店铺面积"
              >
                <template #append>平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工数量" prop="staffCount">
              <el-input-number
                v-model="storeForm.staffCount"
                :disabled="!isEditing"
                :min="0"
                placeholder="员工数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="店铺描述" prop="description">
              <el-input
                v-model="storeForm.description"
                :disabled="!isEditing"
                type="textarea"
                :rows="4"
                placeholder="请输入店铺描述信息"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-input
                :value="storeForm.createTime"
                disabled
                placeholder="创建时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最后更新">
              <el-input
                :value="storeForm.updateTime"
                disabled
                placeholder="最后更新时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 营业统计卡片 -->
    <el-row :gutter="24" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon sales">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">¥{{ formatNumber(todaySales) }}</div>
              <div class="stats-label">今日销售额</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon orders">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ todayOrders }}</div>
              <div class="stats-label">今日订单数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon customers">
              <el-icon><User /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ todayCustomers }}</div>
              <div class="stats-label">今日客流量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon inventory">
              <el-icon><Box /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ inventoryCount }}</div>
              <div class="stats-label">库存商品数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Shop,
  Edit,
  Check,
  Close,
  TrendCharts,
  Document,
  User,
  Box
} from '@element-plus/icons-vue'

// 响应式数据
const isEditing = ref(false)
const storeFormRef = ref()

// 店铺信息表单
const storeForm = reactive({
  name: '旗舰店（总店）',
  code: 'STORE001',
  type: 'flagship',
  status: 'active',
  address: '北京市朝阳区建国门外大街1号国贸大厦1层',
  phone: '010-85123456',
  manager: '张经理',
  openTime: '09:00',
  closeTime: '22:00',
  area: '500',
  staffCount: 15,
  description: '公司旗舰店，位于CBD核心商圈，主要经营高端商品，服务优质客户群体。',
  createTime: '2024-01-15 10:30:00',
  updateTime: '2024-08-17 15:45:00'
})

// 备份原始数据
const originalForm = ref({})

// 表单验证规则
const storeRules = {
  name: [
    { required: true, message: '请输入店铺名称', trigger: 'blur' },
    { min: 2, max: 50, message: '店铺名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入店铺编码', trigger: 'blur' },
    { pattern: /^[A-Z0-9]{6,20}$/, message: '店铺编码格式不正确', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择店铺类型', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择店铺状态', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入店铺地址', trigger: 'blur' },
    { min: 5, max: 200, message: '地址长度在 5 到 200 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '电话格式不正确', trigger: 'blur' }
  ],
  manager: [
    { required: true, message: '请输入店长姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  openTime: [
    { required: true, message: '请选择营业开始时间', trigger: 'change' }
  ],
  closeTime: [
    { required: true, message: '请选择营业结束时间', trigger: 'change' }
  ],
  area: [
    { required: true, message: '请输入店铺面积', trigger: 'blur' },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '面积格式不正确', trigger: 'blur' }
  ],
  staffCount: [
    { required: true, message: '请输入员工数量', trigger: 'blur' }
  ]
}

// 统计数据
const todaySales = ref(125680)
const todayOrders = ref(89)
const todayCustomers = ref(156)
const inventoryCount = ref(2340)

// 方法
const handleEdit = () => {
  // 备份原始数据
  originalForm.value = JSON.parse(JSON.stringify(storeForm))
  isEditing.value = true
}

const handleSave = async () => {
  try {
    await storeFormRef.value.validate()
    
    // 模拟保存API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新时间
    storeForm.updateTime = new Date().toLocaleString('zh-CN')
    
    isEditing.value = false
    ElMessage.success('店铺信息保存成功！')
  } catch (error) {
    ElMessage.error('请检查表单信息是否正确')
  }
}

const handleCancel = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要取消编辑吗？未保存的更改将丢失。',
      '确认取消',
      {
        confirmButtonText: '确定',
        cancelButtonText: '继续编辑',
        type: 'warning'
      }
    )
    
    // 恢复原始数据
    Object.assign(storeForm, originalForm.value)
    isEditing.value = false
  } catch {
    // 用户取消操作
  }
}

const formatNumber = (num) => {
  return num.toLocaleString('zh-CN')
}

// 生命周期
onMounted(() => {
  // 模拟加载店铺信息
  console.log('店铺信息页面已加载')
})
</script>

<style scoped>
.store-info-container {
  padding: 20px;
}

.page-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #303133;
}

.store-form {
  margin-top: 20px;
}

.stats-row {
  margin-top: 20px;
}

.stats-card {
  height: 120px;
}

.stats-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 20px;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.stats-icon.sales {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stats-icon.orders {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stats-icon.customers {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stats-icon.inventory {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stats-info {
  flex: 1;
}

.stats-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stats-label {
  font-size: 14px;
  color: #909399;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .store-info-container {
    padding: 10px;
  }
  
  .stats-content {
    padding: 15px;
  }
  
  .stats-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-right: 12px;
  }
  
  .stats-value {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .card-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .stats-content {
    flex-direction: column;
    text-align: center;
    padding: 10px;
  }
  
  .stats-icon {
    margin-right: 0;
    margin-bottom: 8px;
  }
}
</style>